.app-dark-theme {
  @extend .app-dark-base-color;

  --vscode-bg-color: rgb(32, 32, 32);
  --blue-background-color: rgb(35, 36, 41);

  --background-color: var(--blue-background-color);
  --background-color-white: var(--vscode-bg-color);

  --drag-background-color: var(--color-gray-10);
  --new-card-list-background-color: rgba(201, 200, 200, 0.2);
  --new-card-list-background-color-menu: rgba(129, 129, 129, 0.8);
  --float-box-bg-color: rgba(235, 235, 235, 0.2);
  --gray-border-color: var(--color-gray-10);

  --login-panel-bg: rgba(56, 56, 56, 0.8);

  --app-header-bg: rgba(30, 30, 30, 0.6);
  --app-header-text-color: var(--color-gray-9);

  --text-color: var(--color-gray-8);

  --card-border-color: rgba(196, 196, 196, 0.257);
  --card-shadow-color: rgba(0, 0, 0, 0.135);
  --card-shadow-extend-color: rgba(0, 0, 0, 0.3);

  .app-header-wrapper {
    border-bottom: 1px solid var(--color-gray-5);
  }

  // Antdv for dark mode
  .ant-btn-default {
    background-color: var(--color-gray-4);
    box-shadow: 0 2px 0 rgba(55, 55, 55, 0.15);
  }

  .ant-btn-primary {
    border: 1px solid #424242;
  }

  .ant-modal-content {
    border: 1px solid var(--color-gray-5);
    border-radius: 8px;
  }
  .ant-tag-purple {
    border: 1px solid var(--color-purple-5) !important;
  }
}

.app-dark-base-color {
  // https://ant.design/docs/spec/colors-cn
  --color-red-1: #2a1215;
  --color-red-2: #431418;
  --color-red-3: #58181c;
  --color-red-4: #791a1f;
  --color-red-5: #a61d24;
  --color-red-6: #d32029;
  --color-red-7: #e84749;
  --color-red-8: #f37370;
  --color-red-9: #f89f9a;
  --color-red-10: #fac8c3;
  --color-volcano-1: #2b1611;
  --color-volcano-2: #441d12;
  --color-volcano-3: #592716;
  --color-volcano-4: #7c3118;
  --color-volcano-5: #aa3e19;
  --color-volcano-6: #d84a1b;
  --color-volcano-7: #e87040;
  --color-volcano-8: #f3956a;
  --color-volcano-9: #f8b692;
  --color-volcano-10: #fad4bc;
  --color-orange-1: #2b1d11;
  --color-orange-2: #442a11;
  --color-orange-3: #593815;
  --color-orange-4: #7c4a15;
  --color-orange-5: #aa6215;
  --color-orange-6: #d87a16;
  --color-orange-7: #e89a3c;
  --color-orange-8: #f3b765;
  --color-orange-9: #f8cf8d;
  --color-orange-10: #fae3b7;
  --color-gold-1: #2b2111;
  --color-gold-2: #443111;
  --color-gold-3: #594214;
  --color-gold-4: #7c5914;
  --color-gold-5: #aa7714;
  --color-gold-6: #d89614;
  --color-gold-7: #e8b339;
  --color-gold-8: #f3cc62;
  --color-gold-9: #f8df8b;
  --color-gold-10: #faedb5;
  --color-yellow-1: #2b2611;
  --color-yellow-2: #443b11;
  --color-yellow-3: #595014;
  --color-yellow-4: #7c6e14;
  --color-yellow-5: #aa9514;
  --color-yellow-6: #d8bd14;
  --color-yellow-7: #e8d639;
  --color-yellow-8: #f3ea62;
  --color-yellow-9: #f8f48b;
  --color-yellow-10: #fafab5;
  --color-lime-1: #1f2611;
  --color-lime-2: #2e3c10;
  --color-lime-3: #3e4f13;
  --color-lime-4: #536d13;
  --color-lime-5: #6f9412;
  --color-lime-6: #8bbb11;
  --color-lime-7: #a9d134;
  --color-lime-8: #c9e75d;
  --color-lime-9: #e4f88b;
  --color-lime-10: #f0fab5;
  --color-green-1: #162312;
  --color-green-2: #1d3712;
  --color-green-3: #274916;
  --color-green-4: #306317;
  --color-green-5: #3c8618;
  --color-green-6: #49aa19;
  --color-green-7: #6abe39;
  --color-green-8: #8fd460;
  --color-green-9: #b2e58b;
  --color-green-10: #d5f2bb;
  --color-cyan-1: #112123;
  --color-cyan-2: #113536;
  --color-cyan-3: #144848;
  --color-cyan-4: #146262;
  --color-cyan-5: #138585;
  --color-cyan-6: #13a8a8;
  --color-cyan-7: #33bcb7;
  --color-cyan-8: #58d1c9;
  --color-cyan-9: #84e2d8;
  --color-cyan-10: #b2f1e8;
  --color-blue-1: #111a2c;
  --color-blue-2: #112545;
  --color-blue-3: #15325b;
  --color-blue-4: #15417e;
  --color-blue-5: #1554ad;
  --color-blue-6: #1668dc;
  --color-blue-7: #3c89e8;
  --color-blue-8: #65a9f3;
  --color-blue-9: #8dc5f8;
  --color-blue-10: #b7dcfa;
  --color-geekblue-1: #131629;
  --color-geekblue-2: #161d40;
  --color-geekblue-3: #1c2755;
  --color-geekblue-4: #203175;
  --color-geekblue-5: #263ea0;
  --color-geekblue-6: #2b4acb;
  --color-geekblue-7: #5273e0;
  --color-geekblue-8: #7f9ef3;
  --color-geekblue-9: #a8c1f8;
  --color-geekblue-10: #d2e0fa;
  --color-purple-1: #1a1325;
  --color-purple-2: #24163a;
  --color-purple-3: #301c4d;
  --color-purple-4: #3e2069;
  --color-purple-5: #51258f;
  --color-purple-6: #642ab5;
  --color-purple-7: #854eca;
  --color-purple-8: #ab7ae0;
  --color-purple-9: #cda8f0;
  --color-purple-10: #ebd7fa;
  --color-magenta-1: #291321;
  --color-magenta-2: #40162f;
  --color-magenta-3: #551c3b;
  --color-magenta-4: #75204f;
  --color-magenta-5: #a02669;
  --color-magenta-6: #cb2b83;
  --color-magenta-7: #e0529c;
  --color-magenta-8: #f37fb7;
  --color-magenta-9: #f8a8cc;
  --color-magenta-10: #fad2e3;

  --color-gray-13: #ffffff;
  --color-gray-12: #fafafa;
  --color-gray-11: #f5f5f5;
  --color-gray-10: #f0f0f0;
  --color-gray-9: #d9d9d9;
  --color-gray-8: #bfbfbf;
  --color-gray-7: #8c8c8c;
  --color-gray-6: #595959;
  --color-gray-5: #434343;
  --color-gray-4: #262626;
  --color-gray-3: #1f1f1f;
  --color-gray-2: #141414;
  --color-gray-1: #000000;

  --color-primary: var(--color-blue-5);
  --color-danger: var(--color-red-5);
  --color-warning: var(--color-yellow-6);
  --color-success: var(--color-green-5);
  --color-info: var(--color-gray-7);
}
